<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* class，类选择器，符合：. */
    .ji {
      color: red;
    }

    /* id选择器，符号：# */
    #hui {
      color: red;
    }

    /* 标签选择器，选择所有对应的标签 */
    div {
      font-size: 200px;
    }

    /* 组合选择器，串联多个选择器，使他们同时生效 */
    .ji,
    #hui {
      font-style: italic;
    }

    .done li {
      color: gray;
      text-decoration: line-through;
    }
  </style>
</head>
<body>
  <div>
    <p class="ji">机</p>
    <p id="hui">会</p>
    <div>hello</div>
    <hr>
    <p><big>并</big><small>非</small><big>梦</big>想<small>离</small>我们<small>太</small>远</p>
    <p>只是我们付出的太少</p>
    <mark>这是重点！</mark>
    <p>h<sub>2</sub>o</p>
    <p>30<sup>o</sup></p>
  </div>
  <hr>
  <p>待办事项</p>
  <!-- 第一部分，记录 -->
  <input type="text" placeholder="请输入待办事项">
  <button>保存</button>
  <!-- 第二部分，待办事项 -->
  <p>待办事项</p>
  <ol>
    <li>
      <span>eating</span>
      <button>完成</button>
    </li>
    <li>
      <span>sleeping</span>
      <button>完成</button>
    </li>
    <li>
      <span>coding</span>
      <button>完成</button>
    </li>
  </ol>
  <!-- 第三部分，已完成事项 -->
  <p>已完成事项</p>
  <ol class="done">
    <li>大一</li>
    <li>大二</li>
    <li>大三</li>
  </ol>

  <br />
  <br />
  <br />
  <br />
</body>

</html>